<template>
  <div id="Statistics">
    <div class="content">
      <div class="overflow-auto">
        <div class="Statistics_body">
          <div class="StatisticsData">
            <!-- 筛选时间 -->
            <div class="screen_datepicker screen_datepicker_action">
              <el-date-picker size="small" style="width: 320px;" v-model="screenDate" type="daterange" range-separator="至"
                @change="screenDateChange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
              </el-date-picker>
              <i class="el-icon-date"></i> <!-- 替换为你的图标 -->
            </div>
            <!-- END筛选时间 -->

            <!-- 收款汇总 -->
            <div class="CollectionSummary">
              <!-- 营业额概况 -->
              <div class="turnover">
                <p>营业额概况<span>统计说明</span></p>
                <div class="other">
                  <div class="sum" v-for="item in list" :key="item.id">
                    <div class="sumBox">
                      <div>
                        <div class="sumName">{{ item.text }}</div>
                        <div>{{ item.letter }}</div>
                        <div class="price">￥{{ item.number }}</div>
                      </div>
                      <div class="sumImg"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 概况折线图 -->
              <div class="chartsBox">
                <el-row class="charts" :gutter="100">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <div class="charts_Doughnut">
                      <div class="title">概况折线图</div>
                      <div class="detail_top">
                        <div class="detail_top_Tabs">
                          <div @click="changeLineType(1)" :class="{ 'selectType': lineType == 1 }">房费报表</div>
                          <div @click="changeLineType(2)" :class="{ 'selectType': lineType == 2 }">间夜报表</div>
                          <div @click="changeLineType(3)" :class="{ 'selectType': lineType == 3 }">入住率报表</div>
                          <div @click="changeLineType(4)" :class="{ 'selectType': lineType == 4 }">PovPAR</div>
                        </div>
                      </div>
                      <div id="Line"></div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <!-- 营业明细 -->
              <div class="detail">
                <div class="title">
                  支付方式明细
                  <span>({{ screenDate[0] }} ~ {{ screenDate[1] }})</span>
                </div>
                <div class="detail_top">
                  <div class="detail_top_Tabs">
                    <div :class="{ 'selectType': tableType == 1 }" @click="changeTableType(1)">房费报表</div>
                    <div :class="{ 'selectType': tableType == 2 }" @click="changeTableType(2)">间夜报表</div>
                    <div :class="{ 'selectType': tableType == 3 }" @click="changeTableType(3)">入住率报表</div>
                    <div :class="{ 'selectType': tableType == 4 }" @click="changeTableType(4)">PovPAR</div>
                  </div>
                  <div>
                    <el-button type="primary" size="small" @click="openExport">导出报表</el-button>
                  </div>
                </div>
                <div class="eltable">
                  <el-table max-height="500" ref="exportTable" :data="tableData" style="width: 100%"
                    :header-cell-style="{ background: '#EBF1F6' }">
                    <el-table-column v-for="(item, index) in tableHeaderData" :key="index">
                      <template slot="header">
                        <div>{{ item }}</div>
                      </template>
                      <template slot-scope="scope">
                        <div>
                          <span :style="{ 'color': scope.row[index] == '总计' ? 'red' : '' }">{{ scope.row[index] }}</span>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>

            <!-- 导出报表 -->
            <ExportTable now_export="客房营业汇总" :tableHeaders="tableHeaders" :tableScreen="tableScreen"
              :drawerVisible_Table="drawerVisible_Table" @update:drawerVisible_Table="handleDrawerVisible_Table">
            </ExportTable>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getdaysAgo } from '../../../../api/countDay'
import ExportTable from '../../../../components/exportTable/exportTable.vue'

export default {
  name: 'Statistics',
  components: {
    ExportTable
  },
  data() {
    return {
      // 导出报表组件
      drawerVisible_Table: false,
      tableHeaders: [],//表格的所有表头
      tableScreen: [],//表格筛选字段

      isScreenDate: false,//是否筛选了时间
      isScreenDateType: 0,//类型 1代表，用户选择的时间相同，0代表用户选择的时间不同
      screenDate: [getdaysAgo(new Date(), 1, true), getdaysAgo(new Date(), 1, true)],//筛选时间
      tableHeaderData: [],//营业明细表格
      tableData: [],//营业明细表格
      lineDates: [],//日期数组
      lineValues: [],//日期数组

      tableType: 1,//1 房费报表 2 间夜明细 3 入住率明细 4 RevPAR明细
      lineType: 1,

      // 营业额概况  统计说明
      list: [
        {
          id: 1,
          text: '平均价格(元)',
          letter: 'ADR',
          number: '0.00'
        },
        {
          id: 2,
          text: '平均客房收益',
          letter: 'RevPER',
          number: '0.00'
        },
        {
          id: 3,
          text: '入住率',
          letter: 'Occ',
          number: '0'
        },
        {
          id: 4,
          text: '累计出售间夜数',
          letter: 'ADR',
          number: '0.00'
        },
        {
          id: 5,
          text: '平均每日间夜数',
          letter: 'ADR',
          number: '0.00'
        }
      ]
    }
  },
  created() {
    this.getTable()
    this.getBasic()
    this.getLine()
  },

  methods: {
    /**
    * 导出明细按钮
    */
    openExport() {
      if (this.tableData.length == 0) {
        this.$message.warning('没有可导出的数据！')
        return
      }
      const tableHeaders = Array.from(this.$refs.exportTable.$el.querySelectorAll('th')).map(header => header.innerText).filter(item => item != '');

      const tableScreen = [
        ['开始时间', this.screenDate[0] ? this.screenDate[0] : '全部', this.screenDate[0]],
        ['结束时间', this.screenDate[1] ? this.screenDate[1] : '全部', this.screenDate[1]],
        ['报表类型', this.screenDate[1] ? this.screenDate[1] : '全部', this.screenDate[1]],
      ]
      console.log(tableHeaders, 'tableHeaders');
      console.log(tableScreen, 'tableScreen');
      this.tableHeaders = tableHeaders  // 报表字段
      this.tableScreen = tableScreen  // 筛选字段
      this.drawerVisible_Table = true;
    },
    // 更新父组件的抽屉状态 导出明细
    handleDrawerVisible_Table(value) {
      this.drawerVisible_Table = value;
    },




    changeTableType(type) {
      this.tableType = type
      this.getTable()
    },
    changeLineType(type) {
      this.lineType = type
      this.getLine()
    },
    // 筛选日期时间发生变化
    screenDateChange() {
      if (this.screenDate) {
        this.isScreenDate = true//代表已经筛选了时间  false时代表默认进来时获取的数据日期为当前日期
        if (this.screenDate[0] == this.screenDate[1]) {
          this.isScreenDateType = 1//选择时间相同，则获取该日期前七天的日期作为明细的开始时间
        } else {
          this.isScreenDateType = 0
        }
      }
      console.log(this.screenDate, 'screenDate');
      this.getTable()
      this.getLine()
      this.getBasic()
    },


    LineChart() {
      // 折线
      let LineDom = document.getElementById('Line')
      LineDom.removeAttribute('_echarts_instance_');

      this.myChart_Line = echarts.init(LineDom)
      let option_Line

      option_Line = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.lineDates,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.lineValues,
            type: 'line',
            smooth: true
          }
        ]
      }

      option_Line && this.myChart_Line.setOption(option_Line)
      window.onresize = () => {
        this.myChart_Line.resize();//折线图
      }
    },

    // 获取折线数据
    getLine() {
      // 折线数据图片  api/supplier/statistics/revenue-line
      let lineData = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.isScreenDate == false ? getdaysAgo(new Date(), 7, true) : this.isScreenDateType == 1 ? getdaysAgo(this.screenDate[0], 7, true) : this.screenDate[0],
        end_date: this.isScreenDate == false ? getdaysAgo(new Date(), 0) : this.screenDate[1],
        type: this.lineType,//1平均房价 2入住率 3平均客房收益 4间夜数
      }
      this.my_request('supplier/statistics/revenue-line', lineData, "GET").then(res => {
        console.log(res, '折线数据');
        let { code, data } = res.data
        if (code === 200) {
          this.lineDates = data.date
          this.lineValues = data.list
          this.LineChart()
        }
      })
    },


    // 客房营业基础数据
    getBasic() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1]
      }
      this.my_request('supplier/statistics/revenue-basic', data, 'GET').then(res => {
        console.log(res, '客房营业基础数据');
        let { code, data } = res.data
        if (200 == code) {
          this.list[0].number = data.average_room_price//平均房价
          this.list[1].number = data.average_room_price_rate//平均客房收益
          this.list[2].number = data.stay_room_rate//入住率
          this.list[3].number = data.total_day_light//累计出售间夜数
          this.list[4].number = data.average_day_light//平均每日间夜数
        }
      })
    },
    // 客房营业汇总明细
    getTable() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        start_date: this.screenDate[0],
        end_date: this.screenDate[1],
        type: this.tableType,//1 间夜报表 2 间夜明细 3 入住率明细 4 RevPAR明细
      }
      console.log(data, '客房营业汇总明细data');
      // 客房营业汇总明细 表格数据
      this.my_request('supplier/statistics/revenue-detail', data, "GET").then(res => {
        console.log(res, '客房营业汇总明细');
        let { code, data } = res.data
        if (code === 200) {
          this.tableData = data.list
          this.tableHeaderData = data.header
        }
      })
    },
  }
}
</script>


<style lang="scss" scoped>
.eltable {
  border: 1px solid #E4E7ED;
}

.content {
  .overflow-auto {
    width: calc(100vw - 190px);
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 20px;

    .Statistics_body {
      width: 100%;

      .turnover {
        margin: 20px 0 10px 0;

        p {
          padding-bottom: 20px;
          font-size: 16px;

          span {
            color: #999999;
            margin-left: 10px;
            font-size: 12px;
          }
        }

        .other {
          margin: 0px !important;
          width: 100%;
          display: flex;
          justify-content: space-between;

          .sum {
            width: 18%;
            height: 90px;
            overflow: hidden;

            .sumBox {
              display: flex;
              justify-content: space-between;
              padding: 15px;
              align-items: center;
              background-color: white;
              box-shadow: 0px 4px 7px rgba(222, 222, 222, 0.5);

              div:nth-child(1) {
                div:nth-child(1) {
                  color: #999999;
                  font-size: 13px;
                  margin-top: -3px;
                  min-width: 92px;
                  overflow: hidden;
                }

                div:nth-child(2) {
                  font-size: 12px;
                  color: #999999;
                  margin-bottom: 5px;
                }

                div:nth-child(3) {
                  font-size: 18px;
                  color: #303133;
                }
              }

            }

            .sumImg {
              width: 48px;
              height: 48px;
              margin-right: 10px;
              background-color: #D8D8D8;
              border-radius: 50%;
            }
          }
        }
      }

      .chartsBox {
        width: calc(100vw - 205px);
        overflow: hidden;
      }

      .charts {
        .title {
          height: 50px;
          line-height: 50px;
        }

        .charts_Doughnut {

          .detail_top {
            width: 100%;
          }

          #Line {
            width: 100%;
            height: 280px;
            background-color: #ffffff;
          }
        }
      }

      .detail {
        padding-bottom: 30px;

        .title {
          margin: 20px 0 10px 0;

          span {
            margin-left: 20px;
            color: #999999;
            font-size: 13px;
          }
        }
      }
    }
  }
}

.detail_top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  align-items: center;

  .detail_top_Tabs {
    display: flex;
    font-size: 14px;

    div {
      margin-right: 20px;
      border-bottom: 4px solid transparent;
    }

    .selectType {
      color: #0486FE;
      border-bottom: 4px solid #0486FE;
    }
  }
}

::v-deep .el-table__header-wrapper {
  background-color: #f6f8ff;
}
</style>


<!-- 日期选择器样式 -->
<style lang="scss" scoped>
.screen_datepicker_action {
  ::v-deep .el-input__inner::before {
    content: '筛选时间';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    text-align: center;
    color: #333333;
    font-size: 13px;
  }
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
  display: none;
}

::v-deep .el-date-editor.el-range-editor.el-input__inner.el-date-editor--daterange.el-range-editor--small {
  padding-left: 70px;
}

.screen_datepicker {
  position: relative;
  width: 320px;
  height: 32px;
}

.screen_datepicker i {
  position: absolute;
  right: 5px;
  z-index: 7;
  color: black;
  line-height: 32px;
}
</style>